<template>
  <div class="lotteryTable">
    <search-table
      :url="listUrl"
      ref="searchTable"
      :columns="columns"
      :xLength="1400"
      :form="form"
      :hideSelect="true"
    >
      <template slot="searchForm">
        <a-form layout="inline" :form="form">
          <a-form-item label="全部状态">
            <a-select
              showSearch
              style="width: 195px"
              :options="goodsList"
              v-decorator="['activityStatus', { initialValue: 0 }]"
              placeholder="请选择"
            >
            </a-select>
          </a-form-item>
          <a-form-item label="活动名称">
            <a-input
              allowClear
              v-decorator="['activityName']"
              placeholder="请输入活动名称"
            ></a-input>
          </a-form-item>
        </a-form>
      </template>
      <template slot="tableOperation" slot-scope="{ record }">
        <a-space>
          <!-- <permission authority="lottery:manager:data"> -->
          <span class="text-primary pointer" @click="promoteActive(record)"
            >推广</span
          >
          <span class="text-primary pointer" @click="copy(record)">复制</span>
          <span class="text-primary pointer" @click="checkData(record)"
            >数据</span
          >
          <!-- </permission> -->
          <!-- <permission authority="lottery:manager:view"> -->
          <!-- <span
            class="text-primary pointer"
            @click="checkActivity(record)"
            v-if="record.isChoose == 1 "
            >查看</span
          > -->
          <!-- <span
            class="text-primary pointer"
            @click="checkActivity(record)"
            v-if="record.isChoose != 1"
            >编辑</span
          > -->
          <span
            class="text-primary pointer"
            @click="checkActivity(record)"
            v-if="record.activityStatus != 1"
            >查看</span
          >
          <span
            class="text-primary pointer"
            @click="checkActivity(record)"
            v-else
            >编辑</span
          >
          <!-- </permission> -->
          <!-- <permission authority="lottery:manager:delete"> -->
          <span class="text-danger pointer" @click="deleteActivity(record.id)"
            >删除</span
          >
          <!-- </permission> -->
        </a-space>
      </template>
    </search-table>
    <promoteActive
      :promoteVisible="promoteVisible"
      :promoteId="promoteId"
      @cancel="closePromoteModal"
    ></promoteActive>
  </div>
</template>

<script>
import promoteActive from "./component/promote.vue";
export default {
  name: "lotteryTable",
  components: {
    promoteActive,
  },
  data() {
    return {
      listUrl: "goldenhome/gh/lottery/admin_/lottery/activity/page",
      form: this.$form.createForm(this, { name: "table_search" }),
      // headParams: { baseURL: "goldenhome/gh/lottery" },
      // defaultParams: {},
      // 活动状态
      goodsList: [
        { value: 0, label: "全部状态" },
        { value: 1, label: "未开始" },
        { value: 2, label: "进行中" },
        { value: 3, label: "已结束" },
      ],
      columns: [
        {
          title: "活动类型",
          dataIndex: "lotteryType",
          width: 125,
          key: "lotteryType",
          customRender: (text, record) => {
            if (text == 1) {
              text = "盲盒抽奖";
            }
            return text;
          },
        },
        {
          title: "活动名称",
          dataIndex: "activityName",
          width: 125,
          key: "activityName",
        },
        {
          title: "创建人",
          dataIndex: "userName",
          width: 125,
          key: "userName",
        },
        {
          title: "有效时间",
          dataIndex: "liveTime",
          width: 350,
          key: "liveTime",
          align: "center",
          customRender: (text, record) => {
            return record.startDate + "~" + record.endDate;
          },
        },
        {
          title: "状态",
          dataIndex: "activityStatus",
          width: 125,
          key: "activityStatus",
          customRender: (text, record) => {
            if (text == 1) {
              text = "未开始";
            } else if (text == 2) {
              text = "进行中";
            } else if (text == 3) {
              text = "已结束 ";
            }
            return text;
          },
        },
        {
          title: "访问次数",
          dataIndex: "visitCount",
          width: 100,
          align: "center",
          key: "visitCount",
        },
        {
          title: "参与次数",
          dataIndex: "participateCount",
          width: 100,
          align: "center",
          key: "participateCount",
        },
        {
          title: "中奖次数",
          dataIndex: "winLotteryCount",
          width: 100,
          align: "center",
          key: "winLotteryCount",
        },
        {
          title: "是否上架",
          dataIndex: "isChoose",
          width: 125,
          key: "isChoose",
          align: "center",
          customRender: (text, record) => {
            if (text == 0) {
              return "否";
            } else {
              return "是";
            }
          },
        },
        {
          title: "操作",
          dataIndex: "operation",
          fixed: "right",
          width: 200,
          scopedSlots: { customRender: "operation" },
        },
      ],
      promoteVisible: false,
      promoteId: "",
    };
  },
  methods: {
    //推广
    promoteActive(record) {
      this.promoteVisible = true;
      this.promoteId = record.id;
    },
    // 查看活动数据
    checkData(record) {
      // this.$message.info('查看活动数据');
      this.$router.push({
        name: "MarketingLotteryPageActiveData",
        query: {
          id: record.id,
        },
      });
    },
    // 查看活动
    checkActivity(record) {
      // this.$message.info("查看活动");
      this.$router.push({
        name: "MarketingLotteryPageCreatActive",
        query: {
          lotteryType: record.lotteryType,
          activityStatus: record.activityStatus,
          isChoose: record.isChoose,
          id: record.id,
          type: 1, //编辑查看
        },
      });
      // console.log(record);
    },
    //复制商品
    copy(record) {
      this.$router.push({
        name: "MarketingLotteryPageCreatActive",
        query: {
          lotteryType: record.lotteryType,
          // activityStatus: record.activityStatus,
          // isChoose: record.isChoose,
          id: record.id,
          type: 2, //复制
        },
      });
    },
    // 删除商品
    deleteActivity(ids) {
      // console.log(ids);
      let _this = this;
      this.$confirm({
        title: "删除操作",
        content: "确定是否删除该活动，删除后将直接下架",
        okText: "确认删除",
        cancelText: "取消",
        onOk() {
          _this
            .$post("goldenhome/gh/lottery/admin_/lottery/activity/delete", {
              id: ids,
            })
            .then((res) => {
              if (res && res.returnCode == 1000) {
                _this.$message.success("删除成功");
                _this.$refs.searchTable.resetForm();
              }
            });
        },
        onCancel() {},
      });
    },
    closePromoteModal() {
      this.promoteVisible = false;
    },
  },
};
</script>

<style scoped lang="less">
.lotteryTable {
  /deep/ .search-form {
    display: flex;
    align-items: center;
  }
  /deep/ .ant-form.ant-form-inline {
    height: 56px;
    line-height: 56px;
    display: flex;
    align-items: center;
    .ant-col.ant-form-item-label {
      vertical-align: middle;
      height: 56px;
      line-height: 56px;
    }
  }
  /deep/ .ant-form-item-children {
    display: flex;
    height: 56px;
    align-items: center;
    .ant-btn {
      margin-top: 0 !important;
    }
  }
}
</style>
